<template>
    <div>
      <Breadcrumb>
      <BreadcrumbItem>用户平台</BreadcrumbItem>
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>聊天广场</BreadcrumbItem>
      </Breadcrumb>
        <List item-layout="vertical">
        <ListItem v-for="item in data" :key="item.title">
            <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description" />
            {{ item.content }}
            <template slot="action">
                <li>
                    <Icon type="ios-star-outline" /> 123
                </li>
                <li>
                    <Icon type="ios-thumbs-up-outline" /> 234
                </li>
                <li>
                    <Icon type="ios-chatbubbles-outline" /> 345
                </li>
            </template>
            <template slot="extra">
                <img src="../assets/image/banner.jpg" style="width: 280px">
            </template>
        </ListItem>
    </List>
    <div>
        <Input v-model="value17" maxlength="100" show-word-limit type="textarea" placeholder="想发点什么..." style="width: 100%" />
        <Button type="primary" :loading="loading" @click="toLoading">
        <span v-if="!loading">发送</span>
        <span v-else>Loading...</span>
        </Button>
    </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      data: [
        {
          title: '标题1',
          description: '测试',
          avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
          content: '测试2',
          value17: '',
          loading: false
        }
      ]
    }
  },
  methods: {
    toLoading () {
      this.loading = true
    }
  }
}
</script>
